<template>
	<section>
		<el-col :span="16" :offset="4">
			<h1 style="text-align: center;margin: 20px 0;">课程内容</h1>
			<el-collapse v-model="activeNames">
			  <el-collapse-item title="创业基础课程" name="1">
			    <div class="courselink" v-for="(el,index) in courseStages" v-if="el.stageUnit.courseStage==0">
			    	{{el.stageUnit.name}}
			    	<el-button type="primary" size="small"  @click="skip('/coursestage',$route.query.id,el.unitId,'1',el.isCommitted)" v-if="el.isOpen">进入课程</el-button>
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="案例分析课程" name="2">
			    <div class="courselink" v-for="(el,index) in courseStages" v-if="el.stageUnit.courseStage==1" >
			    	{{el.stageUnit.name}}
			    	<el-button type="primary" size="small" @click="skip('/coursestage',$route.query.id,el.unitId,'2',el.isCommitted)" v-if="el.isOpen">进入课程</el-button>			    
							   
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="沙盘推演课程" name="3">
			    <div class="courselink" >
			    	沙盘推演课程
			    	<el-button type="primary" size="small" @click="skip('/coursestage',$route.query.id,secondStages[2].stageId,'3')"  v-if="secondStages[2].isOpen==1">进入课程</el-button>	
			    	<el-button type="warning" size="small" @click="skip('/stuseat',$route.query.id)"  v-if="secondStages[2].isOpen!=1">选定小组身份</el-button>	
							   
			    </div>
			  </el-collapse-item>
			  <el-collapse-item title="项目路演课程" name="4">
			    <div class="courselink">
			    	项目路演
			    	<el-button type="primary" size="small" @click="skip('/coursestage',$route.query.id,secondStages[3].stageId,'4')" v-if="secondStages[3].isOpen==1">进入课程</el-button>			    			    	
							    
			    </div>
			  </el-collapse-item>
			</el-collapse>				
		</el-col>
	
	</section>
</template>

<script>
	import {courseStucontent,courseone} from '../../api/api';
	
	
	 export default {
	 	data(){
	 		return{
	 			activeNames:['1','2','3','4'],
	 			courseStages:[],
	 			secondStages:[],
	 			courseStageType:""
	 		}
	 	},
	 	methods:{
			getcourseInfo:function(){
				var params=this.$route.query.id;
				var _this=this;
				courseone(params).then((res)=>{			
					_this.secondStages=res.courseStages;
				})			
			},		 		
		    skip(link,id,unitId,stage,isCommitted){
		    	if(isCommitted){
		    		isCommitted=1
		    	}else{
		    		isCommitted=0
		    	}
		        this.$router.push(
		        	{
		        		path:link,
		        		query:{
		        			id:id,
		        			unitId:unitId,
		        			stage:stage,
		        			isCommitted:isCommitted
		        		}
		        	}
		        )
		    },	
			getstucourseInfo:function(){
				var params =new URLSearchParams()
				params.append('courseId',this.$route.query.id)
				params.append('pageSize',200)
				var _this=this;
				courseStucontent(params).then((res)=>{			
					_this.courseStages=res.list;
				})			
			}		    
	 	},
		mounted() {
			var _this=this;
			_this.getcourseInfo();
			_this.getstucourseInfo()
			setTimeout(function(){			
				_this.courseStageType=_this.$store.state.courseInfo.type;
			},500)			
		}  	 	
	 }
</script>

<style>
	.courselink{
		cursor: pointer;
		font-size: 16px;
		display: block;
		margin-bottom: 10px;
	}
	.courselink button{
		float: right;
	}
	.courselink:hover{
		color:#20a0ff;
	}
</style>